import style from "./index.module.scss";
import { Layout, Dropdown, Space } from "antd";
import type { FC } from "react";
import Cookies from "js-cookie";
import type { MenuProps } from "antd";
import { useNavigate } from "react-router-dom";
import Carousel from "react-bootstrap/Carousel";
const menuItems = [
  {
    label: "首页",
    key: "1",
  },
  {
    label: "量表测试",
    key: "2",
  },
  {
    label: "心理咨询",
    key: "3",
  },
  {
    label: "名师直播",
    key: "4",
  },
  {
    label: "心理问答",
    key: "5",
  },
  {
    label: "团体方案",
    key: "6",
  },
];
import homeLogo from "@/assets/images/homeLogo.png";
import loginImg from "@/assets/images/loginImg.png";
import carousel from "@/assets/images/carousel.png";
const Home: FC = () => {
  const { Header, Content } = Layout;
  const navigate = useNavigate();
  const handleClick = (index: number) => {
    console.log(index);
  };
  //获取登录信息
  const authInfo = Cookies.get("auth_info")
    ? Cookies.get("auth_info")
    : "未登录";
  const items: MenuProps["items"] = [
    {
      label: <p>退出登录</p>,
      key: "0",
    },
  ];
  const toLogin = () => {
    Cookies.remove("auth_token", { path: "/" });
    Cookies.remove("token_expiry", { path: "/" });
    Cookies.remove("auth_info", { path: "/" });
    navigate("/login");
  };
  return (
    <>
      <Layout className={style.layout}>
        <Header className={style.header}>
          <div className={style.homeLogo}>
            <img src={homeLogo} alt="logo" />
            <div>
              <p>医心</p>
              <p>您身边的心理医生</p>
            </div>
          </div>
          <div className={style.menu}>
            {menuItems.map((item, index) => (
              <div
                className={style.menuItem}
                key={index}
                data-index={index}
                onClick={() => handleClick(index)}
              >
                {item.label}
              </div>
            ))}
          </div>
          <div className={style.loginInfo}>
            <img src={loginImg} alt="logo" />
            {authInfo ? (
              <Dropdown menu={{ items }} trigger={["click"]}>
                <span onClick={(e) => e.preventDefault()}>
                  <Space>{authInfo}</Space>
                </span>
              </Dropdown>
            ) : (
              <div onClick={() => toLogin}>{authInfo}</div>
            )}
          </div>
        </Header>
        <Content className={style.content}>
          <Carousel className={style.carousel}>
            <Carousel.Item>
              <img src={carousel} alt="carousel" />
            </Carousel.Item>
            <Carousel.Item>
              <img src={carousel} alt="carousel" />
            </Carousel.Item>
            <Carousel.Item>
              <img src={carousel} alt="carousel" />
            </Carousel.Item>
          </Carousel>
        </Content>
      </Layout>
    </>
  );
};
export default Home;
